.timeline {
  @apply relative flex;

  > li {
    @apply relative grid shrink-0 items-center;
    grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) auto var(--timeline-row-end, minmax(0, 1fr));
    grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var(--timeline-col-end, minmax(0, 1fr));

    > hr {
      border: none;
      @apply w-full print:[border:.1px_solid_var(--color-base-300)];

      &:first-child {
        @apply col-start-1 row-start-2;
      }

      &:last-child {
        @apply col-start-3 col-end-[none] row-start-2 row-end-auto;
      }
    }
  }

  :where(hr) {
    @apply bg-base-content/10 h-[1.5px] border-transparent;
  }

  &:has(.timeline-middle hr) {
    &:first-child {
      @apply rounded-e-selector rounded-s-none;
    }

    &:last-child {
      @apply rounded-s-selector rounded-e-none;
    }
  }

  &:not(:has(.timeline-middle)) {
    :first-child hr:last-child {
      @apply rounded-s-selector rounded-e-none;
    }

    :last-child hr:first-child {
      @apply rounded-e-selector rounded-s-none;
    }
  }
}

.timeline-box {
  border: var(--border) solid;
  @apply rounded-box bg-base-100 border-base-content/10 shadow-base-300/20 px-4 py-1 shadow-sm;
}

.timeline-start {
  @apply col-start-1 col-end-4 row-start-1 row-end-2 m-2 self-end justify-self-center;
}

.timeline-middle {
  @apply col-start-2 row-start-2 flex size-9 items-center justify-center;
}

.timeline-end {
  @apply col-start-1 col-end-4 row-start-3 row-end-4 m-2 self-start justify-self-center;
}

.timeline-compact {
  &,
  &.timeline-horizontal {
    --timeline-row-start: 0;

    .timeline-start {
      @apply col-start-1 col-end-4 row-start-3 row-end-4 m-2 self-start justify-self-center;
    }

    li:has(.timeline-start) {
      .timeline-end {
        @apply col-start-[none] row-start-auto;
      }
    }
  }

  &.timeline-vertical {
    > li {
      --timeline-col-start: 0;
    }

    .timeline-start {
      @apply col-start-3 col-end-4 row-start-1 row-end-4 self-center justify-self-start;
    }

    li:has(.timeline-start) {
      .timeline-end {
        @apply col-start-auto row-start-[none];
      }
    }

    .timeline-shift {
      .timeline-start {
        @apply col-start-3 col-end-4 row-start-3;
      }
      .timeline-end {
        @apply col-start-3 col-end-4 row-start-1 row-end-2;
      }
    }
  }
}

.timeline-snap-icon {
  > :where(li) {
    --timeline-col-start: 0.5rem;
    --timeline-row-start: minmax(0, 1fr);
  }
}

.timeline-vertical {
  @apply flex-col;

  > li {
    @apply justify-items-center;
    --timeline-row-start: minmax(0, 1fr);
    --timeline-row-end: minmax(0, 1fr);

    > hr {
      @apply h-full w-[1.5px];

      &:first-child {
        @apply col-start-2 row-start-1;
      }

      &:last-child {
        @apply col-start-2 col-end-auto row-start-3 row-end-[none];
      }
    }
  }

  .timeline-start {
    @apply col-start-1 col-end-2 row-start-1 row-end-4 self-center justify-self-end;
  }

  .timeline-end {
    @apply col-start-3 col-end-4 row-start-1 row-end-4 self-center justify-self-start;
  }

  &:has(.timeline-middle) {
    > li {
      > hr {
        &:first-child {
          @apply rounded-b-selector rounded-t-none;
        }

        &:last-child {
          @apply rounded-t-selector rounded-b-none;
        }
      }
    }
  }

  &:not(:has(.timeline-middle)) {
    :first-child {
      > hr:last-child {
        @apply rounded-t-selector rounded-b-none;
      }
    }

    :last-child {
      > hr:first-child {
        @apply rounded-b-selector rounded-t-none;
      }
    }
  }

  &:where(.timeline-snap-icon) {
    > li {
      --timeline-col-start: minmax(0, 1fr);
      --timeline-row-start: 0.5rem;
    }
  }
}

.timeline-horizontal {
  @apply flex-row;

  > li {
    @apply items-center;

    > hr {
      @apply h-[1.5px] min-h-0 w-full;

      &:first-child {
        @apply col-start-1 row-start-2;
      }

      &:last-child {
        @apply col-start-3 col-end-[none] row-start-2 row-end-auto;
      }
    }
  }

  .timeline-start {
    @apply col-start-1 col-end-4 row-start-1 row-end-2 self-end justify-self-center;
  }

  .timeline-end {
    @apply col-start-1 col-end-4 row-start-3 row-end-4 self-start justify-self-center;
  }

  &:has(.timeline-middle) {
    > li {
      > hr {
        &:first-child {
          @apply rounded-e-selector rounded-s-none;
        }

        &:last-child {
          @apply rounded-s-selector rounded-e-none;
        }
      }
    }
  }

  &:not(:has(.timeline-middle)) {
    :first-child {
      > hr:last-child {
        @apply rounded-s-selector rounded-e-none;
      }
    }

    :last-child {
      > hr:first-child {
        @apply rounded-e-selector rounded-s-none;
      }
    }
  }
}

.timeline-centered {
  .timeline-start {
    @apply self-start;
  }
  .timeline-end {
    @apply self-start;
  }
}
